<template>
	<view :class="[device.lang]">


		<view class="head rtl">
			<view class=" bar-h bg_fff">

			</view>
			<view class="view_head">
				<view class="flip" @click="goToView">
					<uv-icon name="arrow-left" size="18" color="#707070"></uv-icon>
				</view>
				<view class="">
					My fnancial information
				</view>
				<view class="">
					<uv-icon name="/static/images/icon/whatsapp.png" size="28"></uv-icon>
				</view>
			</view>
		</view>
		<view class="box rtl">
			<view class="tip">
				<view class="icon">
					<uv-icon v-if="device.MyShop.shopGrade=='A'" name="/static/images/user/Atip.png"
						size="28"></uv-icon>
					<uv-icon v-else-if="device.MyShop.shopGrade=='B'" name="/static/images/user/Btip.png"
						size="28"></uv-icon>
					<uv-icon v-else-if="device.MyShop.shopGrade=='C'" name="/static/images/user/Ctip.png"
						size="28"></uv-icon>
					<uv-icon v-else name="/static/images/user/Atip.png" size="28"></uv-icon>
				</view>
				<view class="tip_text">
					<text v-if="device.MyShop.shopGrade=='A'">
						{{t("Enjoy the most favorable price, 15% cheaper than B-grade prices! You can participate in the special promotion of products every Saturday!")}}
					</text>
					<text v-else-if="device.MyShop.shopGrade=='B'">
						{{t("Upgrade to A and all prices will decrease by 159!  Upgrade to A, and you can participate in the  weekly Saturday special sale salas avant!")}}
					</text>
					<text v-else-if="device.MyShop.shopGrade=='C'">
						{{t("Upgrade to A and all prices will decrease by 15%!  Upgrade to A, and you can partlclpate in the  weekly Saturday special sale sales event!")}}
					</text>

				</view>

			</view>

			<view class="transfer">
				<view class="title">
					My fnanclal information
				</view>
				<view class="transfer_box">
					<view class="transfer_item" v-for="(item,i) in userInfo.orderPaymentRecords">
						<view class="top">
							Total amount
						</view>
						<view class="bottom">
							<view class="num">
								{{item.nextPaymentAmount}}
							</view>
							<view class="unit">
								SAR
							</view>
						</view>
					</view>
				</view>

				<view class="order_box">
					<view class="order_head">
						<view class="">
							Order Number
						</view>
						<view class="">
							SAR
						</view>
					</view>
					<view class="order_item" v-for="(item,i) in userInfo.orderPaymentRecords">
						<view class="order_num">
							#{{item.orderNo}}
						</view>
						<view class="">
							<view class="sum">
								{{item.paymentAmount}}
							</view>
							<view class="time">
								{{item.paymentTime}}
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		UserAPI
	} from "@/api"
	import {
		useDeviceStore
	} from "@/store/modules/device"
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	const device = useDeviceStore()
	const userInfo = ref({
		"totalAmount": 2795.8,
		"orderPaymentRecords": [{
				"id": 1,
				"orderNo": "p20241107103203",
				"totalAmount": 0,
				"paymentAmount": "+10000.00",
				"paymentTime": "2018-07-08 06:27:21",
				"nextPaymentAmount": 0,
				"paymentMethod": "0",
				"diffDate": 0
			},
			{
				"id": 1,
				"orderNo": "p20241107103203",
				"totalAmount": 0,
				"paymentAmount": "+1000.00",
				"paymentTime": "2018-07-09 06:32:42",
				"nextPaymentAmount": 0,
				"paymentMethod": "0",
				"diffDate": 0
			}
		],
		"paid": 3215.17,
		"unPaid": -419.37
	})
	const queryUserInfo = async () => {
		let res = await UserAPI.getUserInfo();
		userInfo.value = res
	}

	const goToView = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/index.scss";

	page {
		background: $primary-bg;
	}

	.head {
		// background: #127B56;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 0 10rpx #ccc;

		.view_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 0 0 20rpx 20rpx;
			padding: 40rpx 20rpx;
			font-size: 28rpx;
		}

		.head_select {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 20rpx;

			.select_item {
				width: 45%;
				border: 1px solid #fff;
				border-radius: 10rpx;
				padding: 5rpx 10rpx;
				color: #fff;
				position: relative;

				.select_icon {
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.tip {
		display: flex;
		padding: 20rpx;
		background: #fff;
		border-radius: 15rpx;
		margin: 20rpx;
		border: 1px solid #e0e2e4;
		padding: 30rpx 20rpx;

		.icon {
			width: 80rpx;
		}

		.tip_text {
			font-size: 26rpx;
			flex: 1;
		}
	}

	.transfer {
		.title {
			text-align: center;
			font-weight: 600;
			font-size: 28rpx;
		}

		.transfer_box {
			padding: 20rpx;

			.transfer_item {
				background: #fff;
				border-radius: 10rpx;
				padding: 10rpx 40rpx;
				border: 1px solid #dfdee6;
				margin-bottom: 10rpx;
				margin-bottom: 20rpx;

				.top {
					color: #9c9c9c;
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.num {
						font-size: 28rpx;
						font-weight: 600;
						color: #1c1c1c;
					}

					.unit {
						color: #9c9c9c;
						font-size: 24rpx;
					}
				}

			}
		}
	}

	.order_box {
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		margin: 0 20rpx;

		.order_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: $primary-b;
			color: #fff;
			height: 100rpx;
			padding: 0 20rpx;
		}

		.order_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1px solid #eeeeee;

			.order_num {
				color: #545454;
			}

			.sum {
				font-weight: 600;
			}

			.time {
				font-size: 24rpx;
				color: #929292;
			}
		}

		.order_item:last-child {
			border: none;
		}
	}
</style>